<template>
	<div id="temp">
		<div class="row" v-for="(item,index) in datalist">
			<mt-switch class="switch" v-model="value[index]"></mt-switch>
			<img class="img" :src="item.thumb_path" alt="商品图片" >
			<div class="inforight">
				<h4 v-text="item.title"></h4>
				<div class="bottom">
					<ul>
						<li>￥{{item.sell_price}}</li>
						<li>
							<carInput v-on:sendData="getData" :goodsid="item.id" :goodsnum="item.cou"></carInput>
						</li>
						<li><a href="javascript:;" @click="removeList(item.id, index)">删除</a></li>
					</ul>

				</div>
			</div>
		</div>
		<div id="total">
			<div class="desc">
				<ul>
					<li>总计（不含运费）</li>
					<li>已勾选商品 {{getTotalMoney}} 件,总价:￥{{totalMoney}}元</li>
				</ul>
			</div>
			<div id="button">
				<mt-button  type="danger" size="small">去结算</mt-button>
			</div>
		</div>
		
		{{value}}
	</div>
</template>

<script>
	//引入浏览器缓存(按需导入)
	import {getGoodsList, updateData, removeData} from '../../kits/localStorage.js';
	import { Toast } from 'mint-ui';
	import carInput from '../subcom/carInput.vue';
	export default{
		components: {
			carInput
		},
		data(){
			return {
				totalMoney: 0,  //总价
				value:[], //控制开关 (开关有多个  所以用数组存储)
				datalist:[] //存储从后台获取的数据
			}
		},
		created() {
			this.getCarInfo();
		},
		//动态计算属性
		computed: {
			//计算总价
			getTotalMoney() {
				//计算开关为true的个数
				var trueArr = this.value.filter(function (item) {
					return item;
				});
				//定义变量计算总价 (每次value数组改变时都要重新计算价格 若直接使用totalMoney会出错)
				var money = 0;
				//遍历value 当开关为true时 计算价格
				this.value.forEach( (item, index)=>{
					//开关为true
					if (item) {
						var count = this.datalist[index].cou;
						var price = this.datalist[index].sell_price;
						money += count * price;
					}
				} );
				//将计算出的金额赋值给totalMoney
				this.totalMoney = money;
				
				//返回商品的件数
				return trueArr.length;
			}
		},
		methods: {
			//删除数据
			removeList(goodsid, index) {
				//操作value
				this.value.splice(index, 1);
				//操作datalist
				this.datalist.splice(index, 1);
				//操作缓存数据
				removeData(goodsid);
			},
			//获取子组件传过来的数据  resObj格式->>{goodsid: 88, type: 'add'}
			getData(resObj) {
				//更新缓存数据
				updateData(resObj);
				
				//this.getCarInfo();
				//为后面的计算总价做准备  这里不会同步更新页面
				//更新datalist操作子组件的加减时总价才会同步
				for(var i = 0;i <this.datalist.length ; i++){
					if(this.datalist[i].id == resObj.goodsid){
						if(resObj.type =='add'){
							this.datalist[i].cou = this.datalist[i].cou + 1;
						}else{
							this.datalist[i].cou = this.datalist[i].cou - 1;
						}
						break;
					}
				}
				
				//this.getCarInfo();
				
			},
			//获取购物商品列表信息
			getCarInfo() {
				//获取缓存中存储的id  处理数据之后再将数据连接到接口上进行数据请求
				var dataObj = getGoodsList();
				//将获取的数据拼接在一起
				var str = '';
				for (var key in dataObj) {
					str += key + ',';
				}
				//去掉字符串str最后的逗号
				str = str.substr(0, str.length - 1);
				//console.log(dataObj);
				//console.log(str);
				var url = this.$common.apidomain + '/api/goods/getshopcarlist/' + str;
				this.$http.get(url).then(function (res) {
					if (res.body.status != 0) {
						Toast(res.body.message);
						return;
					}
					//将从后台获取的数据赋值给datalist
					//后台传过来的数据中 商品数量默认的都是1 需要进行处理
					//将从缓存处理后的商品数量数据赋给res.body.message后再赋给datalist
					//遍历res.body.message
					res.body.message.forEach( (item)=>{
						//将对应id的商品数量赋给对应的数组每一项
						item.cou = dataObj[item.id];
					} );
					this.datalist = res.body.message;
				});
			}
		}
	}
</script>

<style scoped>
	.row{
		border-bottom: 1px solid rgba(0,0,0,0.3);
		height: 102px;
		display: flex;
		padding: 5px;
	}

	.switch{
		flex:0 0 52px;
	}

	.img{
		margin-left: 5px;
		height: 75px;
		width: 75px;
		flex: 0 0 85px;
	}

	.inforight{
		margin-left: 5px;
		flex:1;
	}
	.inforight ul{
		padding-left: 0px;
	}
	.inforight li{
		list-style: none;
		display: inline-block;
	}

	.inforight h4{
		color: #0094ff;
		font-size: 14px;
	}

	.bottom li:first-child{
		color:red;
		margin-right: 5px;
	}

	.bottom li:last-child{
		margin-left: 5px;
	}
	#total{
		height: 100px;
		background-color: rgba(0,0,0,0.1);
		display: flex;
		padding: 5px;;
	}

	#total ul {
	 padding-left: 0px;
	}
	#total li{
		list-style: none;
		font-size: 14px;
	}

	#button{
		flex:0 0 60px;
		margin: 30px 0 0 0 ;
	}

	.desc{

		flex:1;
	}

</style>